<template>
	<view class="feed-back">
		<view class="feed-back-title">
			<view class="remind">下单成功</view>
			<view class="order-time">
			 下单时间：  {{ creatTime }}
			</view>
		</view>
		
		<view class="qr-code">
			<image :src="qrcode" class="qr-image" mode="widthFix" />
			<view class="qr-code-thank">
				感谢您对我们的信赖
			</view>
		</view>
		
		<view class="thanks">
			<!-- 龙殿上门取件 -->
			<view class="take service" v-if="scene === 'take'">
				由于您选择了<text class="red">龙殿上门取件业务</text>， 
				请扫描上方的<text class="red">二维码</text>，
				添加我们的工作人员企业微信，
				根据您宝物的实际情况、需求、取件距离支付相关费用。
				支付成功后，可以在快递详情页面查看快递支付状态，我司会在支付成功后2小时内上门取件。
				您也可以拨打我司客服电话咨询: 18556386803。
				最后再次感谢您的支持
			</view>
			
			<!-- 服务点自寄 -->
			<view class="mail service" v-if="scene === 'mail'">
				您选择了<text class="red">服务点自寄业务</text>， 
				请扫描上方的<text class="red">二维码</text>，
				添加我们的工作人员企业微信。
				您也可以拨打我司客服电话咨询: 18556386803。
				最后再次感谢您的支持
			</view>
			
			<!-- 派送 -->
			<view class="delivery service" v-if="scene === 'delivery'">
				由于您选择了<text class="red">龙殿派送</text>业务， 
				请扫描上方的<text class="red">二维码</text>，
				添加我们的工作人员企业微信，
				根据您宝物的实际情况、需求、取件距离支付相关费用。
				支付成功后，可以在快递详情页面查看快递支付状态，我司会在支付成功后2小时内上门派送。
				您也可以拨打我司客服电话咨询: 18556386803。
				最后再次感谢您的支持
			</view>
			
			<!-- 服务点自取 -->
			<view class="self-take service" v-if="scene === 'self-take'">
				您选择了<text class="red">服务点自取业务</text>， 
				请扫描上方的<text class="red">二维码</text>，
				添加我们的工作人员企业微信。
				您也可以拨打我司客服电话咨询: 18556386803。
				最后再次感谢您的支持
			</view>
		</view>
	
	    <backBtn />
	</view>
</template>

<script>
	import * as api from '../../utils/api.js'
	import backBtn from '@/components/backBtn.vue'
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		name: 'orderFeedback',
		components: {backBtn},
		data() {
			return {
				imgPrex,
				// take 上门取件  mail 服务点自寄  delivery 派送  self-take服务点自取
				scene: 'take',
				creatTime:  new Date().toLocaleDateString(),
				qrcode: '/static/default-avatar.jpg',
			}
		},
		
		onLoad(options) {
			const { scene, wareHouseId } = options;
			this.scene = scene || 'take';
			wareHouseId && this.getCustomerService(wareHouseId)
		},
		methods: {
			async getCustomerService (wareHouseId) {
				const defaultPng = '/static/default-avatar.jpg';
				const res = await api.getCustomerService({wareHouseId});
				this.qrcode = this.imgPrex +  res.rows[0].customerServiceVx;
			}
		}
	}
</script>

<style lang="scss">
	.feed-back {
		color: white;
		.feed-back-title {
			margin-top:10rpx;
			padding: 24rpx;
			text-align: center;
			.remind {
				padding: 10rpx;
				font-size: 68rpx;  
			   }
			 .order-time {
				 font-size: 40rpx;
				 color: red;  
			   }
		}
		
		.qr-code {
			   text-align: center;
			   .qr-image {
				  width: 360rpx;
				  height: 360rpx;
			   }
			   .qr-code-thank {
				   font-size: 40rpx;
				   padding: 16rpx 0;
			   }
		}
		
		
		.thanks {
			padding:0 60rpx;
			margin-bottom: 80rpx;
			   .service {
				 font-size: 40rpx;  
			   }
			   .red {
				   color: red;
			   }
		}
		
	}
</style>
